<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-07-09 15:01:25
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:29:58
-->
<template>
  <el-popover
    placement="right"
    width="500"
    trigger="hover"
    @show="onShow"
  >
    <div v-loading="loading" style="line-height:24px; font-size:12px;">
      <el-row>
        <el-col :span="span.l">转出账户：</el-col>
        <el-col :span="span.r">{{ dataObj.accountNameOut }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">转出日期：</el-col>
        <el-col :span="span.r">{{ dataObj.transTimeOut }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">转入账户：</el-col>
        <el-col :span="span.r">{{ dataObj.accountNameIn }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">到账日期：</el-col>
        <el-col :span="span.r">{{ dataObj.transTimeIn }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">金额：</el-col>
        <el-col :span="span.r">{{ dataObj.amount }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">手续费：</el-col>
        <el-col :span="span.r">{{ dataObj.procedureAmount }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">手续费支付方：</el-col>
        <el-col :span="span.r">{{ dataObj.procedureUser | procedureUser }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">经手人：</el-col>
        <el-col :span="span.r">{{ dataObj.handUserName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="span.l">制单人：</el-col>
        <el-col :span="span.r">{{ dataObj.createUserName }}</el-col>
      </el-row>
    </div>
    <el-link slot="reference" type="primary">转账详情</el-link>
  </el-popover>
</template>

<script>
import { getDataById } from '@/api/finance/account-trans.js'

export default {
  components: { },
  filters: {
    'procedureUser': (val) => {
      if (val === '0') return '转出账户支付'
      if (val === '1') return '转入账户支付'
    }
  },
  props: {
    billId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dataObj: {},
      span: { l: 6, r: 18 },
      loading: false
    }
  },
  created() {
  },
  methods: {
    onShow() {
      if (Object.keys(this.dataObj).length > 0) return
      if (this.billId) this.getTransDetail(this.billId)
    },
    getTransDetail(id) {
      this.loading = true
      getDataById(id).then(res => {
        this.loading = false
        if (res.data.flag) {
          const data = res.data.data
          this.dataObj = data
        }
      })
    }
  }
}
</script>

<style>

</style>
